<template>
<div class="select-tree">
  <q-select outlined dense :disable="disable" v-model="selTree.label"
            :rules="[val => !isRequire || (val && val.length > 0) || '请填写'+label]">
    <template v-slot:before>
      <label class="text-right name"><span v-if="isRequire"
                                           class="text-red">*</span>{{label}}:</label>
    </template>
    <q-popup-proxy class="my-scroll" ref="qTreeProxy">
      <div class="q-pa-md q-gutter-sm" style="max-height: 400px">
        <q-tree
          :nodes="treeList"
          :node-key="nodeKey"
          selected-color="primary"
          :selected.sync="sel"
          :filter="filter"
          no-results-label="暂无数据"
          :filter-method="filterMethod"
          @update:selected="treeChange"
        />
      </div>
    </q-popup-proxy>
  </q-select>
</div>
</template>

<script>
export default {
  name: 'select-tree',
  props: {
    label: {
      type: String,
      default: ''
    },
    selTree: {
      type: Object,
      default () {
        return {
          id: null,
          label: null,
          hash: null
        }
      }
    },
    treeList: {
      type: Array
    },
    disable: {
      type: Boolean,
      default: false
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    isRequire: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      list: [],
      // sel: JSON.parse(JSON.stringify(this.selTree)),
      sel: null,
      oldSel: null,
      filter: 'default'
    }
  },
  // watch: {
  //   selTree () {
  //     this.sel = this.selTree.hash
  //     this.oldSel = this.sel
  //   }
  // },
  mounted () {
    this.sel = this.selTree[this.nodeKey]
    this.oldSel = this.sel
  },
  methods: {
    setValue (selNode) {
      if (selNode[this.nodeKey]) {
        this.sel = selNode[this.nodeKey]
        this.oldSel = this.sel
      }
    },
    treeChange (target) {
      console.log(target)
      if (target === null || this.selTree[this.nodeKey] === target) {
        this.$emit('treeChange', { id: null, label: null, hash: null })
        this.$refs.qTreeProxy.hide()
        this.$nextTick(() => {
          this.sel = this.oldSel
          const result = this.findTree(this.treeList, this.oldSel)
          this.$emit('treeChange', result)
        })
        return false
      }
      this.oldSel = target
      const result = this.findTree(this.treeList, target)
      // this.selTree.label = result.label
      // this.selTree.id = result.id
      // if (result.hash) {
      //   this.selTree.hash = result.hash
      // }
      // this.selTree.id = result.id
      // this.selTree = result
      this.$emit('treeChange', result)
      this.$refs.qTreeProxy.hide()
    },
    findTree (info, id) {
      for (let i = 0; i < info.length; i++) {
        const child = info[i]
        if (child[this.nodeKey] === id) {
          return child
        }
        if (child.children && child.children.length > 0) {
          const result = this.findTree(child.children, id)
          if (result !== null) {
            return result
          }
        }
      }
      return null
    },
    filterMethod (node, filter) {
      return node.label !== 'default'
    }
  }
}
</script>

<style scoped lang="stylus">
.name{
  font-size 14px
  color #333
}
</style>
